<template>
    <div id="app">
        <el-container ref="signContainer">
            <el-header style="background: white;height: 50px;box-shadow: 5px 5px 10px #D3D3D3;padding-right: 50px;">
                <div style="width: 440px;margin: 0 auto;height: 50px;">
                    <img v-bind:src="mydata.logoUrl" class="logo" width="30px" style="margin-top: 10px;"></img>
                    <span @click="go" style="cursor: pointer; color: #DA552F;position: absolute; top: 13px; font-size: 18px;margin-left: 10px;">Liang Jiaxin</span>
                    <span style="cursor: pointer; color: #DA552F;position: absolute; top: 13px; font-size: 17px;margin-left: 150px;">首页</span>
                    <span style="cursor: pointer; color: #7b7676;position: absolute; top: 13px; font-size: 17px;margin-left: 210px;">库</span>
                    <span style="cursor: pointer; color: #7b7676;position: absolute; top: 13px; font-size: 17px;margin-left: 270px;">专题</span>
                    <span style="cursor: pointer; color: #7b7676;position: absolute; top: 13px; font-size: 17px;margin-left: 330px;">分享</span>
                    <!-- <span style="cursor: pointer; color: #7b7676;position: absolute; top: 13px; font-size: 17px;margin-left: 1060px;">登陆</span> -->
                </div>
            </el-header>
            <el-main>
                <div class="main">
                    <div class="home">
                        <div class="home-padding">
                            <img v-bind:src="mydata.headUrl" class="touxiang" width="180" height="180"/>
                            <img v-bind:src="mydata.headUrl" class="touxiangDown" width="180" height="180"/>
                            <div class="sstext">
                                <p style="font-size:21px; margin:3px; color: #97D5DD; ">{{mydata.name}}</p>
                                <span style="color: white;">一个热爱游戏大于热爱生活的废人.</span>
                            </div>
                            <div style="margin:200px 10px 15px 10px;">
                                <div style="padding:5px 0px;width: auto;" v-loading="loading">
                                    <el-tag @click="tall" class="tag" v-for="list in lists" :key="list">{{list}}</el-tag>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="width:85%;float: left;position: absoult;">
                        <div v-for="(paper,index) in papers" :key="index" class="piece">
                            <div class="piece-padding" v-loading="loading">
                                <p>
                                    <span @click="goToDetail(paper.id)" class="bbsTitle">{{paper.title}}</span>
                                </p>
                                <p style="margin-bottom:5px;">
                                    <i class="el-icon-time"></i>由
                                    <span :style="paper.createOperator?'font-style: italic;color:blue;margin:0px 3px;':''">{{paper.createOperator?paper.createOperator:"神秘人"}}</span> 于
                                    <span :style="paper.createDatetime?'font-style: italic;color: dodgerblue;margin:0px 3px;':''">{{paper.createDatetime?FormatDate(new Date(paper.createDatetime), 'yyyy-MM-dd hh:mm'):"偷偷"}}</span> 创建
                                </p>
                                <div v-if="paper.imageurl" style="width:100%;height:210px;overflow: hidden;">
                                    <div class="image_" @click="openImage(paper.imageurl)" :style="'width:100%;height:210px; overflow:hidden;position: relative;background-image: url('+paper.imageurl+');background-position: center center;'"></div>
                                </div>
                                <div class="contenthtml" ref="htmlele1" v-html="paper.content"></div>
                                <div style="position: absolute;width:94%;text-align: center;">
                                    <div style="width:30%;float:left;margin 0 auto;">
                                        <el-badge class="item">
                                            <el-button @click="zan(paper.id)" type="text" v-waves icon="el-icon-success" size="mini" round>点赞</el-button>
                                        </el-badge>
                                    </div>
                                    <div style="width:30%;float:left;margin 0 auto;margin-left:5%;">
                                        <el-badge class="item">
                                            <el-button @click="ping(paper.id)" type="text" v-waves icon="el-icon-view" size="mini" round>评论</el-button>
                                        </el-badge>
                                    </div>
                                    <div style="width:30%;float:left;margin 0 auto;margin-left:5%;">
                                        <el-badge class="item">
                                            <el-button @click="fen(paper.id)" type="text" v-waves icon="el-icon-share" size="mini" round>分享</el-button>
                                        </el-badge>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="secondary">
                    <div style="padding:10px;">
                        <!--第一部分，个人信息-->
                        <div style="height: 50px;">
                            <div style="float: left;width:50px;height:50px;border-radius:50px;overflow: hidden;">
                                <img v-bind:src="mydata.headUrl" width="50" height="50"/>
                            </div>
                            <div style="float: left;width:auto;height:40px;line-height: 20px;padding:5px">
                                <a style="text-decoration: none;" href="mailto:liang.jiaxin@mayi888.com"><span>{{mydata.name}}</span><br/><span>{{mydata.email}}</span></a>
                            </div>
                        </div>
                        <!--第二部分，引导关注-->
                        <div style="">
                            <div style="position: relative; margin: 10px 0px;">
                                <el-button v-waves icon="el-icon-circle-plus-outline" @click="follow">关注我鸭</el-button>
                            </div>
                            <div style="position: relative; margin: 10px 0px;">
                                <el-button v-waves icon="el-icon-menu" @click="please">登陆/注册</el-button>
                            </div>
                            <div style="position: relative; margin: 10px 0px;">
                                <el-button v-waves icon="el-icon-setting" @click="please">换肤换肤</el-button>
                            </div>
                            <div style="position: relative; margin: 10px 0px;">
                                <el-button v-waves icon="el-icon-star-off" @click="please">友情链接</el-button>
                            </div>
                            <div style="position: relative; margin: 10px 0px;">
                                <el-button v-waves icon="el-icon-edit" @click="write"> 写博文 </el-button>
                            </div>
                        </div>
                    </div>
                </div>
            </el-main>
        </el-container>
        <imageDialog :dialogVisual="dialogVisual" :images="images" @handleClose="closeImage"/>
        <!-- 底部插件 -->
        <bottom/>
    </div>
</template>

<script>
import imageDialog from '../components/imageDialog'
import VueRouter from 'vue-router'
import {getBbsThemes} from '@/api/index'
import {getBbsLists} from '@/api/bbs'
import waves from '@/directive/waves' // 水波纹指令
import bottom from '../components/bottom' // 底部插件
export default {
    name: "index",
    components: {
        imageDialog, // 注册组件
        bottom
    },
    directives: { waves },
    data(){
        return{
            dialogVisual: false,
            images: [],
            mydata: {
                name: '1',
                color: '',
                email: '123',
                headUrl: ''
            },
            lists: [
                "weibo","zhihu","twitter","bilibili","dingding","zhifubao","wechat"
            ],
            list: '',
            papers: [],
            papersRight: [],
            paper: '',
            loading: true
        }
    },
    created() {
        this.select();
        this.loadListData();
        const _this = this;
        setTimeout(function(){
            _this.onready()
        },1000);
    },
    methods: {
        go() {
            window.location.href='https://ljxnb.xin'
        },
        select() {
            getBbsThemes().then(res => {
                if (res.data.length>0) {
                    this.mydata = res.data[0];
                    document.querySelector('body').setAttribute('style', 'background-color: '+this.mydata.color)
                }
            })
        },
        loadListData() {
            getBbsLists({}).then(res => {
                console.log(res.data)
                if (res.data.length) {
                    this.papers = res.data
                } else {
                    this.$message.warning("对方不想说话，并向你抛出一个异常(*,*)")
                }
            })
        },
        follow() {
            this.$message.success("听说你想关注我？再等等吧！")
        },
        please() {
            this.$message.success("功能正在加紧开发，敬上")
        },
        tall() {
            this.$message.success("这里是文章分类啦")
        },
        zan(id) {
            this.$message.warning("别点了，点也没有用")
        },
        ping(id) {
            this.$message.warning("别点了，真的没有用")
        },
        fen(id) {
            this.$message.warning("别点了，还是没有用")
        },
        onready() {
            this.loading = false
        },
        write() {
            // this.$store.dispatch('setCaseId',id)
            this.$router.push({path: '/write/write',name:'write'})
        },
        // 详情页
        goToDetail(bbsid) {
            this.$router.push({path: '/index/detail',name:'detail',params:{'id': bbsid}})
        },
        // 打开大图片
        openImage(images) {
            let data = []
            if (images != null) {            
               data.push(images)
            }
            this.images = data
            this.dialogVisual = true;
        },
        closeImage() {
            this.images = []
            this.dialogVisual = false;
        },
    }
}
// function ooo(){
// 	document.getElementById('div2').style.height='400';
// }
// function ccc(){
// 	document.getElementById('div2').style.height='0';
// }
</script>

<style lang="scss">
body{
    margin: 0 0;
    padding: 0 0;
}
el-container{
    background: #B0DFE5;
    transition: all 0.3s;
}
h1,h2,h3,h4,p,span,#app{
    margin: 0 auto;
    padding: 0;
    margin: 0;
    font-size: 14px;
    color:#7A7A7A;
}
.image_,.logo {
    cursor: pointer;  
    transition: all 0.6s;
}
.image_:hover, .logo:hover{
    transform: scale(1.1);  
}
// 标题
.bbsTitle{
    font-size:20px;
    color:#64BFCC;
    margin-bottom:5px;
    transition:all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
}
.bbsTitle:hover{
    cursor: pointer;
    text-decoration: underline;
}

/*
 * 头像动画
 */
.touxiang{margin:0 auto;background:white;position:relative;position:absolute;left:0;top:0;z-index:100;transition:all 0.6s;-moz-transition: all 0.6s;-webkit-transition: all 0.6s;}
.touxiang:hover{ opacity: 0;}
.touxiangDown{transition:all 0.3s;-moz-transition: all 0.3s;-webkit-transition: all 0.3s;overflow:hidden;position:absolute;left:0;top:0;filter:blur(4px);z-index:99;}
.sstext{filter:none;position:absolute;z-index:99;padding:20px;}
/**结束 */


.imageDialog{
    .el-dialog__wrapper{
        .el-dialog{
            .el-dialog__header{
                padding: 5px 20px 10px;
                .el-dialog__headerbtn{
                    width: 20px;
                }
            }
            .el-dialog__body{
                padding: 0px;
            }
        }
    }
}

.secondary {
    min-width: 200px;
    max-width: 300px;
    min-height: 340px;
    max-height: 400px;
    margin: 10px;
    position: fixed;
    top: 60px;
    right: 10px;
    background: #E2F3F5;
    border-radius: 10px;
    border: 1px solid white;
    animation: myfirst 1.2s;
    -moz-animation: myfirst 1.2s;	/* Firefox */
    -webkit-animation: myfirst 1.2s;	/* Safari 和 Chrome */
    -o-animation: myfirst 1.2s;	/* Opera */
    transition: all 0.3s;
}
.secondary:hover{
    top:35px;
    cursor: pointer;
    box-shadow: 0px 10px 25px #9D9D9D;
}
.main{
    margin: 0 auto;
    max-width: 1200px;
    min-width: 1200px;
    min-height: 800px;
    animation: anm-right0 1.2s;
    -moz-animation: anm-right0 1.2s;	/* Firefox */
    -webkit-animation: anm-right0 1.2s;	/* Safari 和 Chrome */
    -o-animation: anm-right0 1.2s;	/* Opera */
}
.piece{
    width: 100%;
    /* height: 440px; */
    float: left;
    margin-bottom: 20px;
}
.piece-padding{
    width: 94%;
    /* height: 100%; */
    padding:2%;
    padding-bottom: 40px;
    position: relative;
    border-radius: 5px;
    backdrop-filter: .8;
    background: white;
    box-shadow: 5px 5px 10px #9D9D9D;
    animation: anm-right1 1.2s;
    -moz-animation: anm-right1 1.2s;	/* Firefox */
    -webkit-animation: anm-right1 1.2s;	/* Safari 和 Chrome */
    -o-animation: anm-right1 1.2s;	/* Opera */
}
.home{
    width:180px;
    height: 596px;
    float: right;
    position: relative;
}
.home-padding {
    width:100%;
    height:100%;
    background: #FFFFFF;
    position: relative;
    overflow: hidden;
    box-shadow: 10px 10px 10px #9D9D9D;
    animation: anm-right0 1.2s;
    -moz-animation: anm-right0 1.2s;	/* Firefox */
    -webkit-animation: anm-right0 1.2s;	/* Safari 和 Chrome */
    -o-animation: anm-right0 1.2s;	/* Opera */
}
.tag{
    margin:3px;
}
.tag:hover{
    background:#F0F9EB;
    color:#7DC26D;
    cursor: pointer;
}
.paperimg{
    width:100%;
    overflow: hidden;
    position: relative;
    top: -20;
}
button{
    width: 100%;
    height: 40px;
    border: 1px solid #7A7A7A;
    border-radius: 5px;
    color: white;
    background-image: linear-gradient(90deg,#6BB4FC,#2E93FB)
}
.waves-ripple {
    position: absolute;
    border-radius: 100%;
    background-color: rgba(0, 0, 0, 0.15);
    background-clip: padding-box;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    opacity: 1;
}

.waves-ripple.z-active {
    opacity: 0;
    -webkit-transform: scale(2);
    -ms-transform: scale(2);
    transform: scale(2);
    -webkit-transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
    transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
    transition: opacity 1.2s ease-out, transform 0.6s ease-out;
    transition: opacity 1.2s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out;
}
.contenthtml p{
    word-wrap:break-word; 
    word-break:normal; 
}
</style>
<style>
/* css3自定义载入动画 */
@keyframes myfirst
{
    from {top:100px;opacity: 0;}
    to {top: 60px;opacity: 1;}
}

@-moz-keyframes myfirst /* Firefox */
{
    from {top:100px;opacity: 0;}
    to {top: 60px;opacity: 1;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
    from {top:100px;opacity: 0;}
    to {top: 60px;opacity: 1;}
}

@-o-keyframes myfirst /* Opera */
{
    from {top:100px;opacity: 0;}
    to {top: 60px;opacity: 1;}
}
/* ② */
@keyframes anm-right0
{
    from {right: -50px;opacity: 0;}
    to {right: 0px;opacity: 1;}
}

@-moz-keyframes anm-right0 /* Firefox */
{
    from {right: -50px;opacity: 0;}
    to {right: 0px;opacity: 1;}
}

@-webkit-keyframes anm-right0 /* Safari 和 Chrome */
{
    from {right: -50px;opacity: 0;}
    to {right: 0px;opacity: 1;}
}

@-o-keyframes anm-right0 /* Opera */
{
    from {right: -50px;opacity: 0;}
    to {right: 0px;opacity: 1;}
}

/* 3 */
@keyframes anm-right1
{
    from {opacity: 0;}
    to {opacity: 1;}
}

@-moz-keyframes anm-right1 /* Firefox */
{
    from {opacity: 0;}
    to {opacity: 1;}
}

@-webkit-keyframes anm-right1 /* Safari 和 Chrome */
{
    from {opacity: 0;}
    to {opacity: 1;}
}

@-o-keyframes anm-right1 /* Opera */
{
    from {opacity: 0;}
    to {opacity: 1;}
}
</style>

